<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${product.id != null ? '编辑商品' : '新增商品'}">商品表单</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 2rem 0;
            padding-top: 90px; /* 为导航栏留空间 */
        }

        /* 导航栏样式 */
        .top-navbar {
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1030;
        }

        .top-navbar .navbar-brand {
            font-size: 1.3rem;
            letter-spacing: 0.5px;
            font-weight: 700;
        }

        .top-navbar .nav-link {
            color: rgba(255,255,255,0.85) !important;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            margin: 0 0.2rem;
            transition: all 0.2s;
        }

        .top-navbar .nav-link:hover,
        .top-navbar .nav-link.active {
            background: rgba(255,255,255,0.15);
            color: white !important;
        }

        .form-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            background: white;
        }

        .card-header {
            background: linear-gradient(135deg, #4f46e5, #4338ca);
            color: white;
            border-radius: 15px 15px 0 0 !important;
            padding: 1.5rem;
        }

        .form-label {
            font-weight: 600;
            color: #374151;
        }

        .form-control, .form-select {
            border-radius: 10px;
            border: 2px solid #e5e7eb;
            padding: 0.75rem 1rem;
            transition: all 0.3s;
        }

        .form-control:focus, .form-select:focus {
            border-color: #4f46e5;
            box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
        }

        .preview-card {
            background: linear-gradient(135deg, #f8f9fa, #e9ecef);
            border-radius: 15px;
            padding: 2rem;
            position: sticky;
            top: 2rem;
        }

        .preview-image {
            width: 100%;
            height: 250px;
            object-fit: cover;
            border-radius: 10px;
            border: 3px solid #e5e7eb;
        }

        .btn-primary {
            background: linear-gradient(135deg, #4f46e5, #4338ca);
            border: none;
            border-radius: 25px;
            padding: 0.75rem 2rem;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(79, 70, 229, 0.3);
        }

        .section-title {
            color: #4f46e5;
            font-weight: 700;
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 3px solid #4f46e5;
        }

        .info-text {
            font-size: 0.875rem;
            color: #6b7280;
        }
    </style>
</head>

<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark top-navbar">
    <div class="container-fluid">
        <a class="navbar-brand fw-bold" href="/dashboard">
            <i class="bi bi-box-seam-fill me-2"></i>商品管理系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/dashboard">
                        <i class="bi bi-speedometer2"></i> Dashboard
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/product/list">
                        <i class="bi bi-box"></i> 商品管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/category/list">
                        <i class="bi bi-tags"></i> 分类管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/log/list">
                        <i class="bi bi-clock-history"></i> 操作日志
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/doc">
                        <i class="bi bi-book"></i> API文档
                    </a>
                </li>
            </ul>
            <div class="d-flex align-items-center">
                <!-- 用户信息 -->
                <div th:if="${currentUser}" class="me-3 text-white">
                    <small>欢迎,</small>
                    <strong th:text="${currentUser.realName ?: currentUser.username}"></strong>
                </div>
                
                <a href="/product/add" class="btn btn-light btn-sm me-2">
                    <i class="bi bi-plus-circle"></i> 新增商品
                </a>
                <a href="/druid" target="_blank" class="btn btn-outline-light btn-sm me-2">
                    <i class="bi bi-speedometer"></i> 监控
                </a>
                <!-- 登出按钮 -->
                <a href="/auth/logout" class="btn btn-outline-light btn-sm">
                    <i class="bi bi-box-arrow-right"></i> 登出
                </a>
            </div>
        </div>
    </div>
</nav>



<script>
    // 自动高亮当前页面的导航项
    document.addEventListener('DOMContentLoaded', function() {
        const currentPath = window.location.pathname;
        const navLinks = document.querySelectorAll('.top-navbar .nav-link');

        // 移除所有active类
        navLinks.forEach(link => link.classList.remove('active'));

        // 根据当前路径添加active类
        navLinks.forEach(link => {
            const href = link.getAttribute('href');
            if (currentPath === href ||
                (href !== '/dashboard' && currentPath.startsWith(href))) {
                link.classList.add('active');
            }
        });
    });
</script>

<body>
<div class="container form-container">
    <div class="row">
        <!-- 左侧表单 -->
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h4 class="mb-0">
                        <i class="bi bi-box-seam me-2"></i>
                        <span th:text="${product.id != null ? '编辑商品' : '新增商品'}"></span>
                    </h4>
                </div>
                <div class="card-body p-4">
                    <form id="productForm">
                        <input type="hidden" id="productId" name="id" th:value="${product.id}">

                        <!-- 基本信息 -->
                        <h5 class="section-title"><i class="bi bi-info-circle me-2"></i>基本信息</h5>
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label for="productName" class="form-label">商品名称 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="productName" name="productName"
                                       th:value="${product.productName}" required>
                                <div class="info-text mt-1">请输入商品的完整名称</div>
                            </div>
                            <div class="col-md-6">
                                <label for="productCode" class="form-label">商品编码 <span class="text-danger">*</span></label>
                                <input type="text" class="form-control" id="productCode" name="productCode"
                                       th:value="${product.productCode}" pattern="[A-Z0-9-]+" required>
                                <div class="info-text mt-1">仅支持大写字母、数字和连字符</div>
                            </div>
                            <div class="col-md-6">
                                <label for="categoryId" class="form-label">商品分类 <span class="text-danger">*</span></label>
                                <select class="form-select" id="categoryId" name="categoryId" required>
                                    <option value="">请选择分类</option>
                                    <option th:each="cat : ${categories}"
                                            th:value="${cat.id}"
                                            th:text="${cat.categoryName}"
                                            th:selected="${cat.id == product.categoryId}"></option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label for="brand" class="form-label">品牌</label>
                                <input type="text" class="form-control" id="brand" name="brand"
                                       th:value="${product.brand}">
                            </div>
                            <div class="col-md-6">
                                <label for="specification" class="form-label">规格</label>
                                <input type="text" class="form-control" id="specification" name="specification"
                                       th:value="${product.specification}" placeholder="如：500ml、XL码">
                            </div>
                            <div class="col-md-6">
                                <label for="unit" class="form-label">单位</label>
                                <input type="text" class="form-control" id="unit" name="unit"
                                       th:value="${product.unit}" placeholder="如：件、台、箱">
                            </div>
                        </div>

                        <!-- 价格与库存 -->
                        <h5 class="section-title mt-4"><i class="bi bi-currency-dollar me-2"></i>价格与库存</h5>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="purchasePrice" class="form-label">进货价</label>
                                <div class="input-group">
                                    <span class="input-group-text">¥</span>
                                    <input type="number" class="form-control" id="purchasePrice" name="purchasePrice"
                                           th:value="${product.purchasePrice}" step="0.01" min="0">
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label for="salePrice" class="form-label">销售价 <span class="text-danger">*</span></label>
                                <div class="input-group">
                                    <span class="input-group-text">¥</span>
                                    <input type="number" class="form-control" id="salePrice" name="salePrice"
                                           th:value="${product.salePrice}" step="0.01" min="0.01" required>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label for="stockQuantity" class="form-label">库存数量</label>
                                <input type="number" class="form-control" id="stockQuantity" name="stockQuantity"
                                       th:value="${product.stockQuantity}" min="0">
                            </div>
                            <div class="col-md-6">
                                <label for="minStock" class="form-label">最小库存预警</label>
                                <input type="number" class="form-control" id="minStock" name="minStock"
                                       th:value="${product.minStock}" min="0">
                            </div>
                            <div class="col-md-6">
                                <label for="maxStock" class="form-label">最大库存</label>
                                <input type="number" class="form-control" id="maxStock" name="maxStock"
                                       th:value="${product.maxStock}" min="1">
                            </div>
                        </div>

                        <!-- 商品状态 -->
                        <h5 class="section-title mt-4"><i class="bi bi-toggles me-2"></i>商品状态</h5>
                        <div class="row g-3">
                            <div class="col-md-4">
                                <label for="status" class="form-label">销售状态</label>
                                <select class="form-select" id="status" name="status">
                                    <option value="1" th:selected="${product.status == 1 || product.status == null}">在售</option>
                                    <option value="0" th:selected="${product.status == 0}">下架</option>
                                    <option value="2" th:selected="${product.status == 2}">缺货</option>
                                </select>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label d-block">热销商品</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="isHot" name="isHot"
                                           th:checked="${product.isHot == 1}">
                                    <label class="form-check-label" for="isHot">设为热销商品</label>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <label class="form-label d-block">新品标记</label>
                                <div class="form-check form-switch">
                                    <input class="form-check-input" type="checkbox" id="isNew" name="isNew"
                                           th:checked="${product.isNew == 1}">
                                    <label class="form-check-label" for="isNew">设为新品</label>
                                </div>
                            </div>
                        </div>

                        <!-- 商品描述 -->
                        <h5 class="section-title mt-4"><i class="bi bi-card-text me-2"></i>商品描述</h5>
                        <div class="mb-3">
                            <label for="imageUrl" class="form-label">商品图片URL</label>
                            <input type="text" class="form-control" id="imageUrl" name="imageUrl"
                                   th:value="${product.imageUrl}" placeholder="https://example.com/image.jpg">
                            <div class="info-text mt-1">输入图片URL，将在右侧实时预览</div>
                        </div>
                        <div class="mb-3">
                            <label for="description" class="form-label">商品详情</label>
                            <textarea class="form-control" id="description" name="description" rows="5"
                                      th:text="${product.description}" placeholder="请输入商品的详细描述..."></textarea>
                        </div>

                        <!-- 提交按钮 -->
                        <div class="d-flex justify-content-between mt-4">
                            <a href="/product/list" class="btn btn-secondary">
                                <i class="bi bi-arrow-left"></i> 返回列表
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle me-2"></i>保存商品
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!-- 右侧预览 -->
        <div class="col-lg-4">
            <div class="preview-card">
                <h5 class="mb-3"><i class="bi bi-eye me-2"></i>商品预览</h5>
                <div class="text-center mb-3">
                    <img id="previewImage"
                         th:src="${product.imageUrl ?: '/images/default-product.png'}"
                         class="preview-image" alt="商品预览">
                </div>
                <h6 id="previewName" class="fw-bold" th:text="${product.productName ?: '商品名称'}"></h6>
                <p id="previewBrand" class="text-muted small" th:text="${product.brand ?: '品牌'}"></p>
                <div class="d-flex justify-content-between mb-2">
                    <span>售价:</span>
                    <strong class="text-success">¥<span id="previewPrice" th:text="${product.salePrice ?: '0.00'}"></span></strong>
                </div>
                <div class="d-flex justify-content-between mb-2">
                    <span>库存:</span>
                    <span id="previewStock" th:text="${product.stockQuantity ?: '0'}"></span>
                </div>
                <div class="mb-3">
                    <span class="badge bg-info" id="previewCategory">分类</span>
                    <span class="badge bg-success ms-1" id="previewStatus">在售</span>
                </div>
                <p id="previewDescription" class="small text-muted" th:text="${product.description}"></p>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
    // 实时预览
    $('#productName').on('input', function() {
        $('#previewName').text($(this).val() || '商品名称');
    });

    $('#brand').on('input', function() {
        $('#previewBrand').text($(this).val() || '品牌');
    });

    $('#salePrice').on('input', function() {
        $('#previewPrice').text($(this).val() || '0.00');
    });

    $('#stockQuantity').on('input', function() {
        $('#previewStock').text($(this).val() || '0');
    });

    $('#imageUrl').on('input', function() {
        const url = $(this).val();
        if (url) {
            $('#previewImage').attr('src', url);
        }
    });

    $('#description').on('input', function() {
        $('#previewDescription').text($(this).val() || '暂无描述');
    });

    $('#categoryId').on('change', function() {
        const text = $(this).find('option:selected').text();
        $('#previewCategory').text(text || '分类');
    });

    $('#status').on('change', function() {
        const statusMap = {'1': '在售', '0': '下架', '2': '缺货'};
        $('#previewStatus').text(statusMap[$(this).val()]);
    });

    // 表单提交
    $('#productForm').on('submit', function(e) {
        e.preventDefault();

        const formData = {
            id: $('#productId').val() || null,
            productName: $('#productName').val(),
            productCode: $('#productCode').val().toUpperCase(),
            categoryId: $('#categoryId').val(),
            brand: $('#brand').val(),
            specification: $('#specification').val(),
            unit: $('#unit').val() || '件',
            purchasePrice: parseFloat($('#purchasePrice').val()) || 0,
            salePrice: parseFloat($('#salePrice').val()),
            stockQuantity: parseInt($('#stockQuantity').val()) || 0,
            minStock: parseInt($('#minStock').val()) || 10,
            maxStock: parseInt($('#maxStock').val()) || 1000,
            imageUrl: $('#imageUrl').val(),
            description: $('#description').val(),
            status: parseInt($('#status').val()),
            isHot: $('#isHot').is(':checked') ? 1 : 0,
            isNew: $('#isNew').is(':checked') ? 1 : 0
        };

        $.ajax({
            url: '/product/save',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify(formData),
            success: function(result) {
                if (result.success) {
                    alert('保存成功！');
                    window.location.href = '/product/list';
                } else {
                    alert('保存失败：' + result.message);
                }
            },
            error: function() {
                alert('保存失败，请检查网络连接！');
            }
        });
    });
</script>
</body>
</html>